<template>
  <div class="attach" v-for="(item, index) in props.attachList" :key="index">
    <div class="img-box">
      <n-image ref="prev" :src="hadnleSrc(item.path)" :fallback-src="VOtherImg" :preview-src="previewSrc"
        :preview-disabled="previewDisable" style="width: 100%; height: 100%" />
    </div>

    <div style="width: 100%">
      <NTooltip>
        <template #trigger>
          <div class="els">{{ item.name }}</div>
        </template>
        <div>{{ item.name }}</div>
      </NTooltip>
    </div>
    <div class="am-btns">
      <NButton type="primary" class="btn" ghost @click="preview(item)">
        <n-icon size="14" style="margin-right: 5rem">
          <VisibilityOutlined />
        </n-icon>
        预览
      </NButton>
      <NButton type="primary" class="btn" ghost @click="downLoad(item, index)" :loading="downList[index]">
        <n-icon size="14">
          <VerticalAlignBottomFilled />
        </n-icon>
        下载
      </NButton>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { VisibilityOutlined, VerticalAlignBottomFilled } from '@vicons/material'
import { NButton, NIcon, NImage, useMessage, NEllipsis, NTooltip } from 'naive-ui'
import VWordImg from '@/assets/images/word.png'
import VZipImg from '@/assets/images/zip.png'
import VPdfImg from '@/assets/images/pdf.png'
import VExcelImg from '@/assets/images/excel.png'
import VOtherImg from '@/assets/images/other.png'
import router from '@/router'

const imgSuffix = ['jpeg', 'gif', 'svg', 'png', 'pjpeg', 'jpg']
const message = useMessage()
const props = defineProps({ attachList: { type: Array<any>, default: () => [] } })
const downList: any = ref([])
onMounted(() => {
  downList.value = new Array(props.attachList?.length).fill(false)
})

// 默认附件图片显示
const hadnleSrc = (link: any) => {
  if (!link) return VOtherImg
  const tmp = link.split('.')
  if (imgSuffix.includes(tmp[tmp.length - 1].toLowerCase())) {
    return link
  } else if (['xlsx', 'xls'].includes(tmp[tmp.length - 1])) {
    return VExcelImg
  } else if (['docx', 'doc'].includes(tmp[tmp.length - 1])) {
    return VWordImg
  } else if (['zip'].includes(tmp[tmp.length - 1])) {
    return VZipImg
  } else if (['pdf'].includes(tmp[tmp.length - 1])) {
    return VPdfImg
  } else return VOtherImg
}
// 预览附件
const prev = ref<any>()
const previewSrc = ref<any>(null)
const previewDisable = ref(true)
const preview = async (row: any) => {
  const url = row.path || row.url
  if (!url) return message.error('暂无附件')
  const tmp = url.split('.')
  previewDisable.value = false
  if (imgSuffix.includes(tmp[tmp.length - 1].toLowerCase())) {
    previewSrc.value = url
    setTimeout(() => {
      prev.value[0].click()
      previewDisable.value = true
    }, 0)
  } else if (['xlsx', 'xls', 'pdf', 'docx', 'doc', 'txt'].includes(tmp[tmp.length - 1])) {
    previewDisable.value = true
    router.push({ path: '/OA/Common/AttachContent', query: { id: row.remoteId || row.id } })
  } else message.error('暂不支持该类型预览功能')
}
// 下载附件
const downLoad = async (row: any, index: any) => {
  try {
    downList.value[index] = true
    const a = document.createElement('a')
    const bold: any = await fetch(row.path).then((e) => e.blob())
    a.href = window.URL.createObjectURL(bold)
    a.download = row.name
    a.click()
    window.URL.revokeObjectURL(a.href)
    downList.value[index] = false
    message.success('下载附件成功')
  } catch {
    downList.value[index] = false
    message.error('下载附件失败')
  }
}
</script>
<style scoped lang="scss">
.els {
  max-width: 90%;
  margin: 0 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}

.attach {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 168rem;
  padding: 0 10rem;
  height: 140rem;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  margin-right: 15rem;

  .am-btns {
    display: flex;
    gap: 0 5rem;
  }

  .img-box {
    max-width: 60rem;
    width: 50rem;
    height: 50rem;
    background-color: #ebeceb;
  }

  .btn {
    display: flex;
    justify-content: center;
    --n-width: 63rem !important;
    --n-height: 24rem !important;
    font-size: 14rem;
    padding: 0;
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
